Welcome to Creationbangla-24. কেমন আছেন বন্ধুরা? আশা করি মহান আল্লাহ্ তা'য়ালার অশেষ রহমতে ভালো আছেন। আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "<colgroup> ট্যাগ" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।
<colgroup> ট্যাগ এর গঠনরীতি: <colgroup> ট্যাগ এর গঠনরীতি হলো <colgroup>...Given your tag...</colgroup>
আপনি টেবিলে কলাম বিন্যাসের জন্য যে ট্যাগ ব্যহার করতে চান সেই সম্পর্কিত সব কিছু <colgroup> ও </colgroup> এর মাঝে রাখতে হবে। অন্যথায় টেবিলের কলাম বিন্যাস হবে না। তাছাড়া <colgroup> ট্যাগে Global Attributes ও Event Attributes support করে।
আপনি টেবিলে কলাম বিন্যাসের জন্য যে ট্যাগ ব্যহার করতে চান সেই সম্পর্কিত সব কিছু <colgroup> ও </colgroup> এর মাঝে রাখতে হবে। অন্যথায় টেবিলের কলাম বিন্যাস হবে না। তাছাড়া <colgroup> ট্যাগে Global Attributes ও Event Attributes support করে।
নিম্নে টেবিলের কলাম বিন্যাস করার জন্য কোডিং করে দেখানো হলো। আপনি চাইলে কোড বা টেক্স পরিবর্তন করে এখানেই অনুশীলন করতে পারেন এবং Run Code Button এ ক্লিক করে উপরের কোডগুলোর Output দেখতে পারেন । আবার আপনি চাইলে Copy Code Button এ ক্লিক করে কোডগুলো কপি করতে পারেন এবং তা আপনার প্রয়োজনে ব্যাবহার করতে পারেন।
Output
উপরিউক্ত Tag বিশ্লেষণ ও কাজের বর্ণনা :
- <!doctype html> এটাকে আসলে সম্পূর্ণ কোন Tag বলা হয় না। <!doctype html> ট্যাগ ব্যবহার করা হয় <html> ট্যাগ এর পূর্বে। যা ওয়েব ব্রাউজার কে html এর ভার্সন বলে দেয়। যাতে ওয়েব ব্রাউজার ওয়েব কন্টেন্ট গুলোর সাথে ভালো ভাবে কাজ করতে পারে। আর <!doctype html> ট্যাগ এর প্রধান কাজ হচ্ছে ওয়েব ব্রাউজার কে বলে দেওয়া যে, ওয়েব পেজটির Document type. HTML5 Standard.
- <html> ট্যাগ দ্বারা ওয়েব ব্রাউজারকে নির্দেশ করা হয়েছে যে, এই ওয়েব পেজটি HTML ভাষায় তৈরী।
- <head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। এখানে ওয়েবপেজের শিরোনাম রাখা হয়েছে <head> ট্যাগ এর মাঝে। তাছাড়াও <head> ট্যাগ এর মাঝেই আপনাকে Style sheet, Script, meta ট্যাগ ব্যবহার করতে হবে।
- <title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে। <title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শুরু করা হয়েছে এবং সম্পূর্ণ শিরোনামটি এই ট্যাগ এর মধ্যেই রাখতে হবে।
- </title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <title> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েবপেজের শিরোনাম বলে গণ্য হবে না।
- </head> ট্যাগ এর মাধ্যমে <head> বন্ধ করা হয়েছে।
- <body> ট্যাগ ওয়েবপজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান সেই সম্পর্কিত সকল ট্যাগ <body> ট্যাগ এর মধ্যে রাখতে হবে।
- <h1> Tag দ্বারা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম নির্ধারণ করা হয়েছে।
- </h1> ট্যাগ এর মাধ্যমে ওয়েবপেজে আলোচিত বিষয়ের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <h1> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম বলে গণ্য হবে না।
- <table> Tag দ্বারা ওয়েবপেজে একটি টেবিল তৈরি করা হয়েছে এবং এর মাঝে border attribute ব্যবহার করে table border নির্ধারণ করে দেওয়া হয়েছে।
- <colgroup> ট্যাগের মাধ্যমে টেবিলটির কলামে বিভিন্ন বৈশিষ্ট্য ব্যবহার করার জন্য বিন্যাস করা হয়েছে।
- <col> ট্যাগটি ব্যবহার করা হয় <colgroup> Element এর প্রতিটি কলামের জন্য column property হিসাবে। প্রথম <col> ট্যাগের মাঝে style attribute ব্যবহার করে স্টাইল করা হয়েছে এবং background colour হিসাবে Yellow ব্যবহার করা হয়েছে। দ্বিতীয় <col> ট্যাগের মাঝে style attribute ব্যবহার করে স্টাইল করা হয়েছে এবং background colour হিসাবে red ব্যবহার করা হয়েছে। আর span attribute এর মাধ্যমে কলাম ভাঙ্গা হয়েছে। এখানে দুইটি কলাম ভাঙ্গা হয়েছে। আপনি যতগুলো কলাম ভেঙ্গে স্টাইল করতে চান তার সংখ্যা লিখে দিবেন। আর <col> একটি empty tag এটি HTML-5 বন্ধ করার প্রয়োজন হয় না। তবে HTML parser পঠনযোগ্য করতে চইলে অবশ্যই প্রত্যেকটি ট্যাগ সঠিকভাবে বন্ধ করতে হবে। তাহলে Empty Tag গুলো বন্ধ করতে হলে Double Angel Bracket এর মাঝে প্রথমে একটি HTML keyword ও পরে একটি / চিহ্নকে একত্রে আবদ্ধ করে এ ধরনের ট্যাগ তৈরি করতে হবে।
- </colgroup> Tag এর মাধ্যমে <colgroup> ট্যাগ বন্ধ করা হয়েছে।
- <tr> ট্যাগের কাজ হলো টেবিলের মাঝে একটি Row বা সারি তৈরি করা। এই ট্যাগের মাধ্যমে টেবিলের মাঝে একটি সারি নেওয়া হয়েছে। এক একটি সারি নেওয়ার জন্য এক একবার <tr> ট্যাগ ব্যবহার করতে হবে।
- <th> ট্যাগের কাজ হলো টেবিলের বৈশিষ্ট্য লিখার জন্য একটি সেল তৈরি করা। এই ট্যাগের মাধ্যমে টেবিলের মাঝে একটি হেডার সেল নেওয়া হয়েছে। এক একটি হেডার সেল নেওয়ার জন্য এক একবার <th> ট্যাগ ব্যবহার করতে হবে। এই ট্যাগ ব্যবহার করে টেবিলের বৈশিষ্ট্য লিখলে ঐ লেখা গুলো স্বয়ংক্রিয়ভাবে হেডার সেলের center point এ অবস্থান করবে এবং বোল্ড স্টাইল হবে।
- </th> Tag এর মাধ্যমে <th> ট্যাগ বন্ধ করা হয়েছে।
- <td> ট্যাগের কাজ হলো টেবিলের মাঝে data রাখার জন্য একটি সেল তৈরি করা। এই ট্যাগের মাধ্যমে টেবিলের মাঝে ডেটা রাখার জন্য একটি সেল নেওয়া হয়েছে। এক একটি সেল নেওয়ার জন্য এক একবার <td> ট্যাগ ব্যবহার করতে হবে।
- </td> Tag এর মাধ্যমে <td> ট্যাগ বন্ধ করা হয়েছে।
- </table> Tag এর মাধ্যমে <table> ট্যাগ বন্ধ করা হয়েছে।
- </body> Tag এর মাধ্যমে <body> ট্যাগ বন্ধ করা হয়েছে।
- </html> Tag Tag এর মাধ্যমে <html> ট্যাগ বন্ধ করা হয়েছে। অর্থাৎ Html ভাষায় তৈরিকৃত ওয়েজপেজটি শেষ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে তা Html ভাষায় তৈরিকৃত ওয়েজপেজটির কোনো Document বলে বিবেচিত হবে না।
ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "<data> ট্যাগ" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "<data> ট্যাগ" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
Post a Comment